<template>
  <view class="box">
    <view class="tou top fixed" :style="'padding-top:' + statusBarHeight1 + 'px'">
      <image
        @click="fanhui"
        class="image1"
        src="https://pic.bangbangtongcheng.com/static/fanhui_bai.png"
      />
      {{ data.shopName }}
      <image
        @click="sousuo"
        class="image2"
        src="https://pic.bangbangtongcheng.com/static/sousuo.png"
        mode="widthFix"
      />
    </view>
    <view class="tou top" :style="'padding-top:' + statusBarHeight1 + 'px'"></view>
    <view class="bannerBox" :class="scrollTop != 0 ? 'Ptop' : ''">
      <view class="banner">
        <swiper
          style="min-height: 0rpx; height: 345rpx"
          class="screen-swiper square-dot"
          :indicator-dots="true"
          :circular="true"
          :autoplay="true"
          indicator-active-color="#ffffff"
          interval="5000"
          duration="500"
        >
          <swiper-item v-for="(item, index) in swiperList" :key="index" @click="bannerD(item.id)">
            <image :src="imgUrl + item" mode="aspectFit" />
          </swiper-item>
        </swiper>
      </view>
    </view>
    <view class="jieshao">
      <p class="p1">店铺介绍</p>
      <p class="p2">{{ data.shopIntroduce || '' }}</p>
      <image
        @click="gongsixiangq()"
        class="image"
        src="https://pic.bangbangtongcheng.com/static/bbzc/yitoudijianli.png"
        mode=""
      ></image>
    </view>
    <view class="tit_t">
      <view :class="xuan == 1 ? 'xuan view' : 'view'" @click="xuanzhong(1)">房源</view>
      <view :class="xuan == 2 ? 'xuan view' : 'view'" @click="xuanzhong(2)">经纪人</view>
      <view :class="xuan == 3 ? 'xuan view' : 'view'" @click="xuanzhong(3)">动态</view>
    </view>
    <scroll-view scroll-y :style="'height:calc( 100vh - ' + statusBarHeight + 'px  - 45px )'">
      <view v-if="xuan == 1">
        <view class="xian"></view>
        <scroll-view
          scroll-x
          style="padding-top: 6rpx"
          class="bg-white nav"
          scroll-with-animation
          :scroll-left="scrollLeft"
        >
          <view
            class="cu-item view"
            :class="index == TabCur ? 'text-green cur' : ''"
            v-for="(item, index) in list"
            :key="index"
            @tap="tabSelect"
            :data-id="index"
          >
            {{ item.name }}
            <image
              src="https://pic.bangbangtongcheng.com/static/xuanzhong.png"
              mode="widthFix"
              v-if="TabCur == index"
            />
          </view>
        </scroll-view>
        <view class="list">
          <view
            class="li"
            v-for="(item, index) in Recommend"
            :key="index"
            @click="details(item.id)"
          >
            <image :src="imgUrl + item.house_image" />
            <view class="li_1">
              <view class="tit">{{ item.title }}</view>
              <view class="jiedao">{{ item.address }} {{ item.cell_name }} {{ item.FLOOR }}</view>
              <view class="shijian">
                <span
                  style="margin-right: 24rpx; color: red; font-size: 36rpx; font-weight: 600"
                  v-if="item.price >= 10000"
                  >{{ (item.price / 10000) | nums }}万</span
                >

                <span
                  style="margin-right: 24rpx; color: red; font-size: 36rpx; font-weight: 600"
                  v-else
                  >{{ item.price }}元</span
                >
                <span style="margin-right: 14rpx">{{ item.house_type }}</span>
                <span style>{{ item.AREA || item.area }}㎡</span>
              </view>
            </view>
          </view>
          <view v-if="Recommend.length == 0" class="none">
            <image src="https://pic.bangbangtongcheng.com/static/none.png" mode="widthFix" />
            <view>没有更多数据了</view>
          </view>
          <view class="down" v-show="Recommend.length != 0 && !downStatus">没有更多了</view>
        </view>
      </view>
      <view v-if="xuan == 2">
        <view
          class="mingpian"
          @click="detailjjr(item.userId)"
          v-for="(item, index) in jjrList"
          :key="index"
        >
          <view class="name">{{ item.userName }}</view>
          <image class="img1" :src="item.userImage" />
          <view class="img2">经纪人</view>
          <view class="xin">
            <image
              class="img3"
              v-for="item1 in Number(item.scoreAvg)"
              :key="item1"
              src="https://pic.bangbangtongcheng.com/static/xin_liang.png"
            />
            <image
              class="img3"
              v-for="item1 in 5 - item.scoreAvg"
              :key="item1"
              src="https://pic.bangbangtongcheng.com/static/xin_hui.png"
            />
          </view>
          <image
            class="img4"
            @click.stop="chat(item.userId, item.userName || item.nikeName, item.image)"
            src="https://pic.bangbangtongcheng.com/static/xiaoxi_lan.png"
          />
          <image
            class="img5"
            @click.stop="getPhone(item.phone)"
            src="https://pic.bangbangtongcheng.com/static/dianhua_lan.png"
          />
          <view class="weigui" @click.stop="weigui(item.userId)">
            <p>{{ item.violation || 0 }}</p>
            <p style="color: #333333; font-size: 32rpx">违规次数</p>
            <image src="https://pic.bangbangtongcheng.com/static/you.png" />
          </view>
        </view>
        <view v-if="jjrList.length == 0" class="none">
          <image src="https://pic.bangbangtongcheng.com/static/none.png" mode="widthFix" />
          <view>没有更多数据了</view>
        </view>
      </view>
      <view v-if="xuan == 3">
        <view class="list_1">
          <view
            class="li"
            v-for="(item, index) in dynamicList"
            :key="index"
            @click="detailsDy(item.id)"
          >
            <image :src="imgUrl + item.image" />
            <view class="li_1">
              <view class="tit">{{ item.title }}</view>
              <view class="shijian">
                <!-- <span
                  style="margin-right: 24rpx; color: #666666; font-size: 28rpx"
                  >叶梦梵</span
                >-->
              </view>
            </view>
          </view>
          <view v-if="dynamicList.length == 0" class="none">
            <image src="https://pic.bangbangtongcheng.com/static/none.png" mode="widthFix" />
            <view>没有更多数据了</view>
          </view>
        </view>
      </view>
    </scroll-view>
    <!-- <view class="hui">
      <image src="https://pic.bangbangtongcheng.com/static/top.png" />返回顶部
    </view>-->
    <view class="bottom">
      <view class="img" style="margin-left: 228rpx; margin-top: 5px" @click="shouchang">
        <image
          v-if="data.isCollection == 0"
          src="https://pic.bangbangtongcheng.com/static/shoucang.png"
        />
        <image
          v-if="data.isCollection == 1"
          src="https://pic.bangbangtongcheng.com/static/ysc.png"
        />
        <p v-if="data.isCollection == 0">收藏</p>
        <p v-if="data.isCollection >= 1">已收藏</p>
      </view>
      <view class="img" style="margin-left: 32rpx; margin-top: 5px" @click="openMap">
        <image src="https://pic.bangbangtongcheng.com/static/fei.png" />
        <p>导航</p>
      </view>
      <view
        class="img"
        @click="getPhone(data.shopPhone)"
        style="margin-left: 54rpx; margin-top: 5px"
      >
        <image src="https://pic.bangbangtongcheng.com/static/dianhua.png" />
        <p>拨打电话</p>
      </view>
      <view class="but" @click.stop="chat(data.userId, data.shopName, imgUrl + data.image)"
        >在线聊天</view
      >
    </view>
    <view class="zbc" v-if="zbc">
      <view class="tan">
        <view class="text">商家已将您标记为离职，是否同意？</view>
        <view class="xiao">稍后</view>
        <view class="tong">同意</view>
        <view class="guan" @click="guan">×</view>
      </view>
    </view>
    <!-- <view-tabbar :selected="0"></view-tabbar> -->
    <uniBall></uniBall>
  </view>
</template>

<script>
  import permision from '@/js_sdk/wa-permission/permission.js'
  import { mapGetters } from 'vuex'
  let statusBarHeight
  //#ifdef H5
  import wxshare from '../utils/index.js'
  statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 10 + 44
  //#endif
  // #ifdef APP-PLUS
  statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 10 + 44
  //  #endif
  // #ifdef MP-WEIXIN
  statusBarHeight = 106
  //  #endif
  export default {
    data() {
      return {
        statusBarHeight,
        zbc: false,
        xuan: 1,
        TabCur: 0,
        scrollLeft: 0,
        list: [
          {
            num: 1,
            name: '全部',
          },
          {
            num: 1,
            name: '新房',
          },
          {
            num: 1,
            name: '二手房',
          },
          {
            num: 1,
            name: '出租房',
          },
        ],
        swiperList: [],
        id: '',
        scrollTop: '',
        data: {},
        imgUrl: this.$imgSrc,
        transactionType: '',
        newOld: '',
        Recommend: [],
        jjrList: [],
        dynamicList: [],
        userInfo: uni.getStorageSync('Pduser'),
        downStatus: true,
      }
    },
    async onLoad(options) {
      this.id = options.id
      await this.getFy()
      /* #ifdef H5 */
      this.jinzhi()
      /* #endif */
    },
    methods: {
      gongsixiangq() {
        if (!this.data.userId) {
          return
        }
        uni.navigateTo({
          url: '/pages_recruitMoney/recruitmentDetails/companyDetails?userId=' + this.data.userId,
        })
      },
      async getPhone(phone) {
        this.onphone(phone)
      },
      onphone(phone) {
        if (!this.userinfo.phone) {
          uni.showModal({
            title: '',
            content: '尚未登录，前往登录？',
            showCancel: true,
            success: (res) => {
              if (res.confirm) {
                //#ifdef H5
                uni.navigateTo({
                  url: '/pages/login/login',
                })
                //#endif
                //#ifdef APP-PLUS
                uni.navigateTo({
                  url: '/pages/login/login',
                })
                //#endif
                //#ifdef MP-WEIXIN
                uni.navigateTo({
                  url: '/pages/login/phoneLogin',
                })
                //#endif
              }
            },
          })
          return
        }
        this.$myRequest
          .post('/api/mobile/public/increaseCallRecord', {
            userId: this.userInfo.id,
            businessType: 1,
            telephoneNumber: this.data.phone,
            associationId: this.data.id,
            callType: 2,
          })
          .then((res) => {})
        if (phone != undefined) {
          uni.makePhoneCall({
            // 手机号
            phoneNumber: phone,
            // 成功回调
            success: (res) => {
              console.log('调用成功!')
            },

            // 失败回调
            fail: (res) => {
              console.log('调用失败!')
            },
          })
        }
      },
      getFy() {
        let that = this
        this.upStatus = false
        this.$myRequest
          .get('/mob/home/getHouseInfo', {
            pageSize: 999,
            pageNo: 1,
            transactionType: this.transactionType,
            newOld: this.newOld,
            shopId: this.id,
            isLz: '0',
          })
          .then((res) => {
            this.Recommend = this.Recommend.concat(res.list)
          })
      },
      openMap() {
        console.log(this.Recommend.latitude, this.Recommend.longitude)
        let that = this
        let param = window.location.href.split('#')[0]
        /* #ifdef H5 */
        uni.request({
          method: 'post',
          data: {
            url: param,
          },
          header: {
            'content-type': 'application/x-www-form-urlencoded',
          },
          url: 'https://www.bangbangtongcheng.com/conven//mob/login/getJsTicket.do',
          success(re) {
            uni.hideLoading()
            wxshare.config({
              debug: false, //是否打开调试
              appId: re.data.appId, // 公众号的唯一标识
              timestamp: re.data.timestamp, // 生成签名的时间戳
              nonceStr: re.data.nonce, // ，生成签名的随机串
              signature: re.data.signature, // 签名
              jsApiList: ['openLocation'],
            })
            wxshare.ready(function () {
              wxshare.openLocation({
                latitude: Number(that.Recommend.latitude), //目的地latitude
                longitude: Number(that.Recommend.longitude), //目的地longitude
                name: that.Recommend.title,
                address: that.data.address,
                scale: 15, //地图缩放大小，可根据情况具体调整
              })
            })
          },
        })
        /* #endif */
        /* #ifndef H5 */
        uni.openLocation({
          latitude: Number(this.data.latitude),
          longitude: Number(this.data.longitude),
          name: this.data.address,
          success: function () {
            console.log('success')
          },
        })
        /* #endif */
      },
      fanhui() {
        uni.navigateBack({
          delta: 1,
        })
      },
      jinzhi() {
        let _this = this
        let param = window.location.href.split('#')[0]
        uni.request({
          method: 'post',
          data: {
            url: param,
          },
          header: {
            'content-type': 'application/x-www-form-urlencoded',
          },
          url: 'https://www.bangbangtongcheng.com/conven//mob/login/getJsTicket.do',
          success(re) {
            _this.jinzhifx(re.data)
          },
        })
      },
      jinzhifx(data) {
        wxshare.config({
          debug: false, //是否打开调试
          appId: data.appId, // 公众号的唯一标识
          timestamp: data.timestamp, // 生成签名的时间戳
          nonceStr: data.nonce, // ，生成签名的随机串
          signature: data.signature, // 签名
          jsApiList: ['hideMenuItems'],
        })
        // 禁止分享
        wxshare.hideMenuItems({
          // 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
          menuList: [
            'menuItem:share:appMessage',
            'menuItem:share:timeline',
            'menuItem:share:timeline',
            'menuItem:share:qq',
            'menuItem:favorite',
            'menuItem:share:QZone',
            'menuItem:openWithSafari',
          ],
        })
      },
    },
  }
</script>

<style lang="less" scoped>
  .box {
    width: 100%;
    // padding-bottom: 100rpx;
    background-color: #fff;
  }

  .tou {
    position: relative;
    width: 100%;
    // height: 88rpx;
    text-align: center;
    line-height: 88rpx;
    font-size: 36rpx;
    color: #fff;
    background-color: #64b6a8;

    .image1 {
      position: absolute;
      width: 32rpx;
      height: 32rpx;
      // top: 116rpx;
      left: 30rpx;
    }

    .image2 {
      position: absolute;
      width: 56rpx;
      height: 56rpx;
      // top: 104rpx;
      right: 30rpx;
    }
  }
</style>
